<template>
  <div style="height: 100%;">
        <pfo :orderStatus="orderStatus" :pageMsg="pageMsg" :clickDo="payNow"/>
        <div id="weichat-box" style="display: none;">
            <div id="weichat-cover"></div>
            <div style="height: 120px;" id="weichat-dialog">
                <p style="text-align: left;">请点击右上角按钮，点击在浏览器中打开</p>
                <span id="confirm">确定</span>
            </div>
        </div>
  </div>
  
</template>
<script>
import PayForOthers from '../../real-components/payForOthers'
import {mapGetters} from 'vuex';
import axios from 'axios';
import API from '@/api/cjy-api';
import {Toast} from "../../utils/toast";
export default {
  components: {
      pfo: PayForOthers
  },
  watch: {
      orderStatus(v) {
            if (v == 1) {
                Toast({
                    duration: 3000,
                    type: 'fail',
                    message: '支付链接已失效'
                })
            } else if (v == 2) {
                Toast({
                    duration: 3000,
                    type: 'fail',
                    message: '该订单已付款'
                })
            }
      }
  },
  computed: {
    ...mapGetters('jyy',{
        pageMsg: 'getPageMsg'
    }),
    login() {
        return this.$store.state.wxh.login
    },
    wx() {
        var ua = navigator.userAgent.toLowerCase();
        var isWeixin = ua.indexOf('micromessenger') != -1;
        return isWeixin
    },
    orderStatus() {
        return this.$store.state.jyy.payForOthersStatus
    }
  },
  created() {
      var parma = this.getParma()
      this.$store.dispatch('jyy/getPFOOrderMsg', parma)
  },
  mounted() {
        //   如果非微信浏览器，则未登录状态跳转至登录页面
      this.weixin(()=>{
        if (!this.login) {
            this.$router.push({
                name: 'login',
                query: {page: "payForOthers"}
            })
        }
      })
  },
  methods: {
    //真实url如下
    //http://test.njxs.weilian.cn/static/NJ/H5/index.html?from=singlemessage#/main/payForOthers?param=94B%2B3RulXfUAfG7NKPbzAMAJ5n3kUH4n8nrLryH%2Fd5A2ItsEoyv4Kz3YGBUsv37FV07aGZnRj5cNrXs%2BmGiVXyixnYPIjq64G7lB%2BaM0Dvk%3D
      getParma() {
          var hrefStr = window.location.href
          var startIndex = hrefStr.indexOf("param") + 6
          var param = hrefStr.substring(startIndex, hrefStr.length);
          console.log('param--------------------')
          console.log(param)
          console.log('param--------------------')
          return decodeURIComponent(param)
      },
    //   点击立即支付
      pathJump(orderNo) {
          //判断是否为微信浏览器   
          this.weixin(() => {
            if (!this.login) {
                this.$router.push({
                    name: 'login',
                    query: {page: "payForOthers"}
                })
            } else {
                console.log("代付订单信息",this.pageMsg);
                // 如果订单已经失效或系统发生错误，则不跳转
                if (this.orderStatus == 1) {
                    Toast({
                        duration: 1000,
                        type: 'fail',
                        message: '支付链接已失效,无法进行支付'
                    })
                    return
                }
                this.$router.replace({name: "otherPay", params: {
                    orderNo: this.pageMsg.parentOrderNo,
                    orderType: "",
                    param: this.getParma()
                }})
            }
          })
      },
    //   判断是否为微信
      weixin(successFn) {
        var ua = navigator.userAgent.toLowerCase();
        var isWeixin = ua.indexOf('micromessenger') != -1;
        if (isWeixin) {
            //提示框
            this.showDialog();
            document.getElementById("confirm").onclick = this.hideDialog;
        } else {
            successFn()
        }
      },
      showDialog() {
        document.getElementById("weichat-box").style.display = "block";
      },
      hideDialog() {
        document.getElementById("weichat-box").style.display = "none";
      }
  },
  data() {
      return {
          payNow: () => {
            this.pathJump()
            //this.$store.dispatch('jyy/payForOthersPayMsg', this.pathJump)
          }
      }
  }
}
</script>
<style scoped>
#download {
    display: block;
    width: 100%;
    height: 100%;
}
.download-img {
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
}
#njxs{
    width: 80%;
    height: 100%;
    position: absolute;
    left: 10%;
}
#weichat-box {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    z-index: 999;
}
#weichat-cover {
    background: #000;
    opacity: 0.4;
    width: 100%;
    height: 100%;
    
}
#weichat-dialog {
    width: 265px;
    height: 150px;
    box-sizing: border-box;
    padding: 20px;
    font-size: 16px;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translateX(-50%) translateY(-50%);
    background: #fff;
    border-radius: 3px;
}
#weichat-dialog>p {
    /* word-break: break-all; */
}
#weichat-dialog>span {
    color: #06bd06;
    position: absolute;
    bottom: 20px;
    right: 20px; 
}

#downloadUrlList{
    width: 70%;
    max-height: 70%;
    overflow-y: scroll;
    overflow-x: hidden;
    text-align: center;
    position: absolute;
    left: 15%;
    top: 15%;
    z-index: 2;
}

#downloadUrlList ul{
    width: 100%;
}

#downloadUrlList ul li{
    width: 100%;
    background: white;
    border: 1px solid lightgray;
    border-bottom: 0;
    list-style: none;
    color: black;
}

#downloadUrlList ul li:nth-child(1){
    height: 2rem;
    line-height: 2rem;
    font-weight: bold;
}

#downloadUrlList ul li:nth-last-child(1){
    height: 2rem;
    line-height: 2rem;
    border-bottom: 1px solid lightgray;
    font-weight: bold;
}

#downloadUrlList ul li a{
    text-decoration: none;
    color: black;
    display: block;
    width: 100%;
}

#downloadUrlList ul li a img{
    width: 100%;
}

#shade{
    width: 100%;
    height: 100%;
    background: white;
    opacity: .4;
    filter: alpha(opacity=70);
    position: absolute;
    left: 0;
    top: 0;
    z-index: 1;
}

.storeName{
    text-align: left;
    font-weight: bold;
    font-size: 1rem;
    line-height: 1.2rem;
    color: #23222C;
    padding: .2rem;
}

.storePosition{
    text-align: left;
    font-size: .8rem;
    line-height: 1.2rem;
    color: #525355;
    padding: .2rem;
    padding-top: 0;
}
</style>


